<template>
  <view class="audio-bar" :class="{ 'playing': playing }">
    <view class="bar-inner">
      <view 
        v-for="(bar, index) in bars" 
        :key="index"
        class="bar" 
        :style="{
          height: bar.height + 'px', 
          animationDuration: bar.duration + 's', 
          animationDelay: bar.delay + 's'
        }"
      ></view>
    </view>
    <!-- <view class="left-line"></view> -->
  </view>
</template>

<script>
export default {
  name: 'LineAnimate',
  
  // 对应 properties
  props: {
    // 控制是否播放动画
    playing: {
      type: Boolean,
      default: false
    },
    // 柱条数量
    count: {
      type: Number,
      default: 30
    }
  },
  
  data() {
    return {
      bars: [] // 每个柱条的高度、节奏、延迟
    }
  },
  
  // 对应 lifetimes.attached
  mounted() {
    this.initBars();
  },
  
  // 监听 props 变化
  watch: {
    count: {
      handler(newVal) {
        this.initBars();
      },
      immediate: false
    }
  },
  
  methods: {
    /**
     * 初始化音频条
     */
    initBars() {
      const bars = [];
      for (let i = 0; i < this.count; i++) {
        bars.push({
          height: 10 + Math.random() * 16, // 随机初始高度 10-26px
          duration: (1.2 + Math.random() * 0.6).toFixed(2), // 随机节奏 1.2-1.8s
          delay: (-Math.random() * 1.5).toFixed(2) // 负延迟防止突兀 -1.5-0s
        });
      }
      this.bars = bars;
    },
    
    /**
     * 重新生成音频条（外部可调用）
     */
    refreshBars() {
      this.initBars();
    }
  }
}
</script>

<style lang="scss" scoped>
.audio-bar {
  width: 750rpx;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.bar-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 6rpx;
  margin: 0 auto;
  z-index: 3;
  // background: #F9E4E2;
}

.bar-inner::before {
  content: '';
  display: block;
  width: 100rpx;
  height: 0rpx;
  position: absolute;
  border-top: 1px dashed #FF84A2;
  z-index: 1;
  top: 50%;
  left: 0;
}

.bar-inner::after {
  content: '';
  display: block;
  width: 100rpx;
  height: 0rpx;
  position: absolute;
  border-top: 1px dashed #FF84A2;
  z-index: 1;
  top: 50%;
  right: 0;
}

.left-line {
  position: absolute;
  width: 100%;
  height: 2rpx;
  border-top: 1px dashed #FF84A2;
  z-index: 1;
  top: 50%;
  left: 0;
}

.bar {
  width: 6rpx;
  background: #FF84A2;
  border-radius: 4rpx;
  transform-origin: bottom center;
  transition: height 0.3s ease;
}

/* 播放状态动画 */
.audio-bar.playing .bar {
  animation: bounce ease-in-out infinite;
  animation-fill-mode: both;
}

@keyframes bounce {
  0%, 100% {
    transform: scaleY(0.4);
    opacity: 0.8;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
</style>